<template>
  <div class="detail-info">
    <div v-if="order" class="wrapper">
      <!-- 商品信息 -->
      <h3 class="box-title">商品信息</h3>
      <div class="box-body">
        <table class="goods">
          <thead>
          <tr>
            <th width="520">商品信息</th>
            <th width="170">单价</th>
            <th width="170">数量</th>
            <th width="170">小计</th>
            <th width="170">实付</th>
          </tr>
          </thead>

          <tbody>
          <tr v-for="item in order.skus" :key="item.skuId">
            <td>
              <a class="info" href="javascript:;">
                <img v-lazy="item.image" alt="">
                <div class="right">
                  <p>{{ item.name }}</p>
                  <p>{{ item.attrsText }}</p>
                </div>
              </a>
            </td>
            <td class="tc">¥{{ item.curPrice }}</td>
            <td class="tc">{{ item.quantity }}</td>
            <td class="tc">
              <!-- 小计 -->
              <p>&yen;{{ item.realPay }}</p>
            </td>
            <td class="tc">
              <!-- 实付 -->
              &yen;{{ item.realPay }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 收货信息 -->
      <h3 class="box-title">收货信息</h3>
      <div class="text">
        <p><span>收<i/>货<i/>人：</span>{{ order.receiverContact }}</p>
        <p><span>联系方式：</span>{{ filterContact(order.receiverMobile) }}</p>
        <p><span>收货地址：</span>{{ order.receiverAddress }}</p>
      </div>

      <!-- 支付方式及送货时间 -->
      <h3 class="box-title">支付方式及送货时间</h3>
      <div class="text">
        <p><span>支付方式：</span>支付宝</p>
        <p><span>送货时间：</span>双休日、假日送货（适合于家庭地址）</p>
      </div>

      <!-- 发票信息 -->
      <h3 class="box-title">发票信息</h3>
      <div class="text">
        <p><span>发票类型：</span>电子发票</p>
        <p><span>发票内容：</span>日用品</p>
        <p><span>发票抬头：</span>个人</p>
      </div>

      <!-- 订单信息 -->
      <h3 class="box-title">订单信息</h3>
      <div class="text">
        <p><span>订单编号：</span>在线支付</p>
        <p><span>下单时间：</span>{{ order.createTime }}</p>
      </div>

      <!-- 汇总信息 -->
      <div class="box-body">
        <div class="total">
          <dl>
            <dt>商品件数：</dt>
            <dd>{{ order.totalNum }}件</dd>
          </dl>
          <dl>
            <dt>商品总价：</dt>
            <dd>{{ order.totalMoney }}</dd>
          </dl>
          <dl>
            <dt>运<i></i>费：</dt>
            <dd>¥{{ order.postFee }}</dd>
          </dl>
          <dl>
            <dt>应付总额：</dt>
            <dd class="price">¥{{ order.payMoney }}</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailInfo',
  props: {
    order: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {

    /**
     * 过滤手机号
     * @param contact 手机号, 注意由于表单设置了 text="number", 所以这个参数是数值类型
     */
    const filterContact = (contact) => {
      // 使用正则替换
      return (contact + '').replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
      // return contact.substr(0, 3) + '****' + contact.substr(7)
    }
    return {
      filterContact,
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  padding: 0 50px;
  min-height: 800px;
  background-color: #fff;

  .box-title {
    height: 70px;
    line-height: 70px;
    padding-left: 10px;

    font-size: 16px;
    font-weight: normal;
  }

  .box-body {

    .goods {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;

      .info {
        display: flex;
        text-align: left;

        img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          vertical-align: middle;
        }

        .right {
          line-height: 24px;

          p {
            &:last-child {
              color: #999;
            }
          }
        }
      }

      tr {
        th {
          background: #f5f5f5;
          font-weight: normal;
        }

        td, th {
          text-align: center;
          padding: 20px;
          border-bottom: 1px solid #f5f5f5;

          &:first-child {
            border-left: 1px solid #f5f5f5;
          }

          &:last-child {
            border-right: 1px solid #f5f5f5;
          }
        }
      }
    }

    .total {
      padding: 30px 30px 100px;

      dl {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
        font-size: 16px;

        dt {
          width: 90px;

          i {
            display: inline-block;
            // 宽度为2em, 就表示占据两个字的宽度
            width: 2em;
          }
        }

        dd {
          width: 160px;
          padding-right: 30px;
          text-align: right;

          &.price {
            font-size: 20px;
            color: @priceColor;
          }
        }
      }
    }
  }

  .text {
    flex: 1;
    width: 100%;
    padding: 20px 20px;

    border: 1px solid #f5f5f5;
    border-radius: 3px;

    p {
      height: 30px;
      line-height: 30px;

      span {
        margin-right: 5px;
        color: #999;

        > i {
          display: inline-block;
          width: 0.5em;
        }
      }
    }
  }

  .submit {
    padding: 60px;
    text-align: right;
    border-top: 1px solid #f5f5f5;
  }
}
</style>
